import { Text, StyleSheet, View } from 'react-native'
import React, { Component } from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons'

import News from './NewsStack'
import User from './UserStack'

const Tab = createBottomTabNavigator()

export default class Home extends Component {
  render() {
    return (
      <Tab.Navigator
        initialRouteName="News"
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName
            console.log(route.name)
            if (route.name === 'News') {
              iconName = focused ? 'newspaper' : 'newspaper-outline'
            } else if (route.name === 'User') {
              iconName = focused ? 'people' : 'people-outline'
            }
            return <Ionicons name={iconName} color={color} size={size} />
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray'
        })}
      >
        <Tab.Screen name="News" component={News} />
        <Tab.Screen name="User" component={User} />
      </Tab.Navigator>
    )
  }
}

const styles = StyleSheet.create({})